<template>
  <div>
    <div class="headers">
      <span class="search-header">搜索用户数</span>
      <svg
        t="1682692437895"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2626"
        width="16"
        height="16"
      >
        <path
          d="M544.316006 271.650957l0 53.611012c0 4.41045-2.957355 7.357572-7.357572 7.357572l-49.957809 0c-4.420683 0-7.316639-2.947122-7.316639-7.357572l0-53.611012c0-4.41045 2.895957-7.357572 7.316639-7.357572l49.957809 0C541.358651 264.293385 544.316006 267.240507 544.316006 271.650957z"
          p-id="2627"
        />
        <path
          d="M542.842445 419.273109l0 337.148693c0 4.400217-2.947122 7.347339-7.357572 7.347339l-47.000454 0c-4.400217 0-7.347339-2.947122-7.347339-7.347339l0-337.148693c0-4.400217 2.947122-7.347339 7.347339-7.347339l47.000454 0C539.895323 411.92577 542.842445 414.872892 542.842445 419.273109z"
          p-id="2628"
        />
        <path
          d="M1023.990786 511.994883c0 91.258447-24.313755 180.859138-70.311369 259.101129-5.730515 9.752108-18.266016 13.006222-28.007891 7.275707-9.752108-5.730515-13.006222-18.266016-7.275707-28.018124 42.303478-71.958892 64.662719-154.386206 64.662719-238.358713 0-63.59848-12.453636-125.293611-37.012985-183.356005-23.720238-56.087413-57.68377-106.464777-100.949156-149.730163-43.265386-43.265386-93.64275-77.239152-149.740396-100.95939-58.062394-24.559349-119.747291-37.002752-183.356005-37.002752s-125.293611 12.443403-183.356005 37.002752c-56.097646 23.720238-106.47501 57.694003-149.740396 100.95939s-77.228919 93.64275-100.949156 149.730163c-24.559349 58.062394-37.012985 119.757524-37.012985 183.356005 0 63.608713 12.453636 125.293611 37.012985 183.356005 23.720238 56.087413 57.68377 106.464777 100.949156 149.740396 43.265386 43.265386 93.64275 77.228919 149.740396 100.949156 58.062394 24.559349 119.747291 37.012985 183.356005 37.012985 117.946272 0 230.79648-43.797505 317.767274-123.308397 8.339946-7.623631 21.284769-7.040347 28.9084 1.299599s7.05058 21.284769-1.289366 28.9084c-94.533027 86.428442-217.196741 134.032646-345.386308 134.032646-69.114101 0-136.171356-13.538341-199.299115-40.246633-60.978816-25.787316-115.725698-62.697971-162.736385-109.708658s-83.921341-101.767801-109.708658-162.736385c-26.708292-63.127759-40.246633-130.185015-40.246633-199.299115s13.538341-136.161123 40.246633-199.299115c25.787316-60.968583 62.697971-115.715465 109.708658-162.736385 47.010687-47.010687 101.757568-83.921341 162.736385-109.708658 63.127759-26.698059 130.185015-40.2364 199.299115-40.2364s136.171356 13.538341 199.299115 40.2364c60.978816 25.787316 115.725698 62.697971 162.736385 109.708658 47.010687 47.02092 83.921341 101.767801 109.708658 162.736385C1010.442212 375.833761 1023.990786 442.880783 1023.990786 511.994883z"
          p-id="2629"
        />
      </svg>
      <!-- <i class="el-icon-warning-outline"></i> -->
    </div>
    <div class="main">
      <span class="main-title">12321</span>
      <span class="main-tontent">17.1</span>
      <svg
        t="1682693673895"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="3823"
        width="16"
        height="16"
      >
        <path
          d="M786.295467 485.000533l-6.126934 2.082134v-18.295467h6.024534l0.1024 16.213333zM221.5424 485.239467h-8.9088l-0.085333-16.247467 8.994133-0.512v16.759467z"
          fill="#1afa29"
          p-id="3824"
        />
        <path
          d="M784.469333 480.290133L504.456533 178.978133a6.826667 6.826667 0 0 0-10.001066 0L214.459733 480.290133a6.826667 6.826667 0 0 0 5.922134 11.4176l158.1056-21.435733L358.4 853.333333v16.162134a6.826667 6.826667 0 0 0 6.826667 7.168h268.356266a6.826667 6.826667 0 0 0 6.826667-7.168l-0.119467-16.3328-19.848533-382.8736 158.122667 21.418666a6.826667 6.826667 0 0 0 5.922133-11.4176z"
          fill="#1afa29"
          p-id="3825"
        />
        <path
          d="M191.3344 734.6176l103.031467 72.789333 103.048533-72.789333a127.197867 127.197867 0 0 0-206.097067 0z"
          fill="#1afa29"
          p-id="3826"
        />
        <path
          d="M294.382933 681.984a127.010133 127.010133 0 0 1 103.048534 52.6336l-103.048534 72.789333-103.031466-72.789333a127.010133 127.010133 0 0 1 103.048533-52.6336m0-10.24a137.915733 137.915733 0 0 0-111.342933 56.849067 10.24 10.24 0 0 0 2.269866 14.2848l0.136534 0.1024L288.426667 815.786667a10.24 10.24 0 0 0 11.810133 0l103.031467-72.772267a10.24 10.24 0 0 0 2.4064-14.3872 137.915733 137.915733 0 0 0-111.342934-56.849067z"
          fill="#1afa29"
          p-id="3827"
        />
        <path
          d="M384.1536 444.142933h1.5872l-20.48 409.6h268.2368l-20.48-409.6"
          fill="#1afa29"
          p-id="3828"
        />
        <path
          d="M633.4976 860.5696H365.226667a6.826667 6.826667 0 0 1-6.826667-7.168l20.48-409.6 5.239467 0.256v-6.826667h1.5872a6.826667 6.826667 0 0 1 6.826666 7.168l-20.1216 402.432H626.346667l-20.1216-402.432 13.653333-0.682666 20.48 409.6a6.826667 6.826667 0 0 1-6.826667 7.168z"
          fill="#1afa29"
          p-id="3829"
        />
        <path
          d="M613.0176 446.276267l166.365867 22.545066L499.387733 167.509333 219.374933 468.821333l164.778667-22.545066"
          fill="#1afa29"
          p-id="3830"
        />
        <path
          d="M633.4976 860.5696H365.226667a6.826667 6.826667 0 0 1-6.826667-7.168l19.968-399.240533-158.122667 21.435733a6.826667 6.826667 0 0 1-5.922133-11.4176L494.370133 162.8672a6.826667 6.826667 0 0 1 10.001067 0L784.384 464.213333a6.826667 6.826667 0 0 1-5.922133 11.4176l-158.122667-21.418666L640.3072 853.333333a6.826667 6.826667 0 0 1-6.826667 7.168z m-261.12-13.653333H626.346667L606.3104 446.634667a6.826667 6.826667 0 0 1 7.7312-7.099734l147.3536 19.950934L499.370667 177.493333 237.3632 459.485867l147.3536-19.968a6.826667 6.826667 0 0 1 7.7312 7.099733z"
          fill="#1afa29"
          p-id="3831"
        />
        <path
          d="M557.3632 617.5744l149.5552 105.659733 149.572267-105.659733a184.644267 184.644267 0 0 0-299.1616 0z"
          fill="#1afa29"
          p-id="3832"
        />
        <path
          d="M706.935467 541.184a184.32 184.32 0 0 1 149.572266 76.3904l-149.572266 105.659733-149.5552-105.659733a184.32 184.32 0 0 1 149.572266-76.3904m0-10.24a194.56 194.56 0 0 0-157.866666 80.622933 10.24 10.24 0 0 0 2.184533 14.2336l0.221867 0.1536 149.5552 105.659734a10.24 10.24 0 0 0 11.810133 0l149.5552-105.642667a10.24 10.24 0 0 0 2.4064-14.3872 194.56 194.56 0 0 0-157.866667-80.622933z"
          fill="#1afa29"
          p-id="3833"
        />
      </svg>
      <svg
        t="1682693719975"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="5044"
        width="16"
        height="16"
      >
        <path
          d="M252.484267 566.749867h11.776v16.6912h-11.776zM815.684267 566.8352h10.461866v16.9984h-10.461866z"
          fill="#996E28"
          p-id="5045"
        />
        <path
          d="M825.361067 580.642133a6.826667 6.826667 0 0 0-6.980267-3.618133l-158.0032 21.418667L680.2432 201.386667a6.826667 6.826667 0 0 0 0-1.058134v-1.109333a6.826667 6.826667 0 0 0-6.826667-7.168H405.1968a6.826667 6.826667 0 0 0-6.826667 7.168v1.109333a6.826667 6.826667 0 0 0 0 1.058134l19.848534 397.038933-158.0032-21.4016a6.826667 6.826667 0 0 0-5.922134 11.4176l280.0128 301.277867a6.826667 6.826667 0 0 0 10.001067 0L824.32 588.424533a6.826667 6.826667 0 0 0 1.041067-7.7824z"
          fill="#996E28"
          p-id="5046"
        />
        <path
          d="M339.780267 523.7248H103.6288a17.066667 17.066667 0 1 1 0-34.133333h236.151467a13.380267 13.380267 0 1 0 0-26.760534h-33.467734a44.782933 44.782933 0 1 1 0.631467-89.565866h238.250667a17.066667 17.066667 0 0 1 0 34.133333h-238.250667a11.093333 11.093333 0 0 0-11.229867 9.5744 10.717867 10.717867 0 0 0 10.5984 11.7248h33.467734a47.5136 47.5136 0 1 1 0 95.0272z"
          fill="#D5382E"
          p-id="5047"
        />
        <path
          d="M545.194667 373.282133a17.066667 17.066667 0 0 1 0 34.133334h-238.250667a11.093333 11.093333 0 0 0-11.229867 9.5744 10.717867 10.717867 0 0 0 10.5984 11.7248h33.467734a47.5136 47.5136 0 1 1 0 95.0272H103.6288a17.066667 17.066667 0 1 1 0-34.133334h236.151467a13.380267 13.380267 0 1 0 0-26.760533h-33.467734a44.782933 44.782933 0 1 1 0.631467-89.565867h238.250667m0-10.24h-238.250667a55.022933 55.022933 0 1 0-0.631467 110.045867h33.467734a3.140267 3.140267 0 1 1 0 6.280533H103.6288a27.306667 27.306667 0 1 0 0 54.613334h236.151467a57.7536 57.7536 0 1 0 0-115.5072h-33.467734a0.512 0.512 0 0 1-0.290133-0.170667 0.3584 0.3584 0 0 1-0.119467-0.221867 1.416533 1.416533 0 0 1 1.041067-0.426666h238.250667a27.306667 27.306667 0 0 0 0-54.613334z"
          fill="#E8D4AB"
          p-id="5048"
        />
        <path
          d="M654.523733 591.854933h-1.5872l20.48-409.6H405.1968l20.48 409.6"
          fill="#AF3131"
          p-id="5049"
        />
        <path
          d="M654.523733 593.5616h-1.5872l20.48-409.6H405.1968l20.48 409.6"
          fill="#D5382E"
          p-id="5050"
        />
        <path
          d="M654.523733 600.388267h-1.5872a6.826667 6.826667 0 0 1-6.826666-7.168l20.1216-402.432H412.3648l20.1216 402.432-13.653333 0.682666-20.48-409.6a6.826667 6.826667 0 0 1 6.826666-7.168h268.253867a6.826667 6.826667 0 0 1 6.826667 7.168l-20.48 409.6-5.239467-0.256z"
          fill="#E8D4AB"
          p-id="5051"
        />
        <path
          d="M425.6768 589.704533l-166.365867-22.528L539.306667 868.471467l279.995733-301.294934-164.778667 22.528"
          fill="#D5382E"
          p-id="5052"
        />
        <path
          d="M425.6768 591.4112l-166.365867-22.528L539.306667 870.178133l279.995733-301.294933-164.778667 22.528"
          fill="#D5382E"
          p-id="5053"
        />
        <path
          d="M539.306667 874.837333a6.826667 6.826667 0 0 1-5.000534-2.184533L254.293333 571.357867a6.826667 6.826667 0 0 1 5.922134-11.4176l158.122666 21.418666-19.968-399.223466a6.826667 6.826667 0 0 1 6.826667-7.168h268.2368a6.826667 6.826667 0 0 1 6.826667 7.168l-19.968 399.240533 158.122666-21.435733a6.826667 6.826667 0 0 1 5.922134 11.4176L544.3072 872.6528a6.826667 6.826667 0 0 1-5.000533 2.184533zM277.2992 576.034133L539.306667 857.975467l262.007466-281.941334-147.3536 19.968a6.826667 6.826667 0 0 1-7.7312-7.099733l20.0192-400.2816H412.3648l20.0192 400.264533a6.826667 6.826667 0 0 1-7.7312 7.099734z"
          fill="#E8D4AB"
          p-id="5054"
        />
        <path
          d="M780.7488 226.338133h105.540267a17.066667 17.066667 0 0 1 0 34.133334h-105.540267a13.380267 13.380267 0 1 0 0 26.760533h8.0384a44.782933 44.782933 0 1 1 0.631467 89.565867H503.7056a17.066667 17.066667 0 0 1 0-34.133334h285.730133a10.717867 10.717867 0 0 0 10.5984-11.7248 11.076267 11.076267 0 0 0-11.229866-9.5744h-8.0384a47.5136 47.5136 0 1 1 0-95.0272z"
          fill="#D5382E"
          p-id="5055"
        />
        <path
          d="M886.289067 226.338133a17.066667 17.066667 0 0 1 0 34.133334h-105.540267a13.380267 13.380267 0 1 0 0 26.760533h8.0384a44.782933 44.782933 0 1 1 0.631467 89.565867H503.7056a17.066667 17.066667 0 0 1 0-34.133334h285.730133a10.717867 10.717867 0 0 0 10.5984-11.7248 11.076267 11.076267 0 0 0-11.229866-9.5744h-8.0384a47.5136 47.5136 0 1 1 0-95.0272h105.540266m0-10.24h-105.557333a57.7536 57.7536 0 1 0 0 115.5072h8.0384a1.416533 1.416533 0 0 1 1.041067 0.426667 0.341333 0.341333 0 0 1-0.119467 0.221867 0.802133 0.802133 0 0 1-0.221867 0.170666H503.7056a27.306667 27.306667 0 0 0 0 54.613334h285.730133a55.022933 55.022933 0 1 0-0.631466-110.045867h-8.0384a3.140267 3.140267 0 1 1 0-6.280533h105.540266a27.306667 27.306667 0 0 0 0-54.613334z"
          fill="#E8D4AB"
          p-id="5056"
        />
      </svg>
    </div>
    <div class="footer">
      <!-- 容器 -->
      <div ref="charts" class="charts"></div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  name: 'LineCharts',
  mounted() {
    // 初始化echarts实例
    const lineCharts = echarts.init(this.$refs.charts)
    // 配置数据
    lineCharts.setOption({
      //
      xAxis: {
        // 隐藏X轴
        show: false,
        // 均分
        type: 'category'
      },
      yAxis: {
        // 隐藏Y轴
        show: false
      },
      // 系列
      series: [
        {
          type: 'line',
          data: [10, 7, 33, 12, 48, 9, 29, 10, 44],
          // 设置拐点的透明度为0
          itemStyle: {
            opacity: 0.2
          },
          // 设置线段的颜色
          lineStyle: {
            color: '#007aff'
          },
          // 区域填充样式
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#007aff' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#fff' // 100% 处的颜色
                }
              ],
              global: false // 缺省为 false
            }
          },
          // 线条弧度
          smooth: true
        }
      ],
      // 布局调试
      grid: {
        left: 0,
        top: 0,
        right: 0,
        bottom: 0
      }
    })
  }
}
</script>
<style lang="scss" scoped>
.headers {
  display: flex;
  align-items: center;
}
.search-header {
  margin-right: 20px;
}
.main {
  margin: 10px 0;
}
.main-title {
  margin-right: 30px;
}
.main-tontent {
  margin-right: 10px;
}
.charts {
  width: 100%;
  height: 50px;
}
</style>
